<template>
  <el-dialog title="新建文件" :visible.sync="dialogVisible" top="8vh"
             :before-close="cancel">
    <el-form :model="file" label-width="85px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="文件主题">
            <el-input v-model="file.fileTheme"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="关键字">
        <el-input type="textarea" v-model="file.fileKeyWord"></el-input>
      </el-form-item>
      <el-form-item label="附件上传">
        <el-upload
          ref="upload"
          :auto-upload="false"
          :data="folder"
          action="/dm/file/uploadFile"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-change="handleChange"
          :on-success="handleSuccess"
          :file-list="fileList"
        >
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="所属文件夹">
        <folder-select-tree :tree-data="treeData" @onClickNode="onClickNode"></folder-select-tree>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="sure">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import FolderSelectTree from '../../../components/folderSelectTree'
  import {Msg} from '../../../tools/message'
  import {fileService} from '../../../service/fileService'
  import {mapState} from 'vuex'

  export default {
    name: 'fileUploadDialog',
    components: {FolderSelectTree},
    data () {
      return {
        file: {},
        fileList: [],
        folder: {}
      }
    },
    props: {
      dialogVisible: {
        type: Boolean,
        default: function () {
          return false
        }
      }
    },
    computed: mapState({
      treeData: state => state.folder.folderTree
    }),
    methods: {
      cancel () {
        this.$emit('cancel')
      },
      sure () {
        this.$refs.upload.submit()
      },
      handleRemove (file, fileList) {
        console.log('remove')
        console.log(file, fileList)
      },
      handlePreview (file) {
        console.log('preview')
        console.log(file)
      },
      handleChange (file, fileList) {
        this.fileList = []
        this.fileList.push(file)
      },
      handleSuccess (response, file, fileList) {
        this.file.userId = this.$store.getters.userInfo.userId
        this.file.fileSize = file.size
        this.file.fileName = file.name

        let path = JSON.parse(response).data
        this.file.filePath = path.realPath
        this.file.relativePath = path.relativePath

        if (!this.file.folderId) {
          this.file.folderId = this.$store.state.folder.currentPath.folderId
        }

        fileService.addFile(this.file).then(res => {
          if (res.data.status) {
            Msg.success(res.data.msg)
            this.$emit('sure')
          } else {
            Msg.error(res.data.msg)
          }
        }).catch(error => {
          Msg.error(error)
        })
      },
      onClickNode (path, id) {
        this.file.folderId = id
        if (path.indexOf('个人文档') > 0) {
          path = path.substring(0, 6) + this.$store.getters.userInfo.userId + '_' + this.$store.getters.userInfo.userName + path.substring(5)
        }
        this.folder.folderPath = path
      },
      // createDefaultVal () {
      //   let path = '/'
      //   let value = this.$store.state.folder.currentPath.paths
      //   value.forEach(v => {
      //     path += v + '/'
      //   })
      //   this.file.filePath = path.substring(0, path.length - 1)
      //   this.file.folderId = this.$store.state.folder.currentPath.folderId
      // }
    },
    // create () {
    //   this.createDefaultVal()
    // }
  }
</script>

<style lang="scss" scoped>

</style>
